<template>
  <div>
    <h1>商品名称：{{ goods.goodsname }}</h1>
    <img :src="$pre + goods.img" alt="" />
    <p>商品价格：￥{{ goods.price-0 | priceFilter }}</p>
    <select v-model="color">
      <option :value="item" v-for="item in goods.specsattr">{{ item }}</option>
    </select>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/index/shop')" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addShop"/>
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { reqDetail,reqCartadd } from "../../http/http";
import {Toast} from 'vant'
export default {
  created() {
    this.getGoodsInfo();
  },
  data() {
    return {
      goods: {},
      color: "",
    };
  },
  methods: {
    async getGoodsInfo() {
      let { data: res } = await reqDetail({ id: this.$route.query.id });
      if (res.code == 200) {
        res.list[0].specsattr = res.list[0].specsattr.split(",");
        this.goods = res.list[0];
        this.color = this.goods.specsattr[0];
      }
    },
    async addShop(){
        let {uid} = JSON.parse(localStorage.getItem('isLogin'))
        let {data:res} = await reqCartadd({uid,goodsid:this.goods.id,num:1});
        console.log(res);
        if(res.code == 200){
            Toast(res.msg)
        }
    }
  },
};
</script>

<style scoped>
img{
    width: 70vw;
    height: 4rem;
}
</style>